import React, { useState } from 'react'
import Fuyong from '../imageConfuyong'
import './list.css'
const TabButton: React.FC<{ active: boolean; onClick: () => void; children: React.ReactNode }> = ({ active, onClick, children }) => (
    <button
        onClick={onClick}
        style={{
            padding: '10px 20px',
            cursor: 'pointer',
            backgroundColor: active ? '#007bff' : '#f0f0f0',
            color: active ? '#fff' : '#333',
            border: 'none',
            borderRadius: '4px',
            margin: '0 5px',
        }}
    >
        {children}
    </button>
);
const Index: React.FC = () => {

    const [activeTab, setActiveTab] = useState<number>(0);
    return (
        <div className='box3'>
            <div className="imgCon-top">
                <div style={{ marginBottom: '10px', paddingTop: '10px', paddingLeft: '20px' }}>
                    <TabButton active={activeTab === 0} onClick={() => setActiveTab(0)}>节日热点</TabButton>
                    <TabButton active={activeTab === 1} onClick={() => setActiveTab(1)}>人物形象</TabButton>
                    <TabButton active={activeTab === 2} onClick={() => setActiveTab(2)}>教育培训</TabButton>
                    <TabButton active={activeTab === 3} onClick={() => setActiveTab(3)}>餐饮美食</TabButton>
                    <TabButton active={activeTab === 4} onClick={() => setActiveTab(4)}>贴纸元素</TabButton>
                    <TabButton active={activeTab === 5} onClick={() => setActiveTab(5)}>古风元素</TabButton>
                    <TabButton active={activeTab === 6} onClick={() => setActiveTab(6)}>社交媒体</TabButton>
                    <TabButton active={activeTab === 7} onClick={() => setActiveTab(7)}>立体元素</TabButton>
                </div>
                <div className='tabmain'>
                    {activeTab === 0 && <div className='imageConsctab'>
                        <div className='imageConsctab1'>
                            <h1>节气元素</h1>
                        </div>
                        <div className='imageConsctab2'>
                            <h1>生肖插画</h1>
                        </div>
                        <div className='imageConsctab3'>
                            <h1>节日装饰</h1>
                        </div>
                        <div className='imageConsctab4'>
                            <h1>劳动节</h1>
                        </div>
                    </div>}
                    {activeTab === 1 && <div>
                        <div className='imageConsctab2'>
                        </div>
                    </div>}
                    {activeTab === 2 && <div><img src="https://ts2.cn.mm.bing.net/th?id=OPAC.ExDRZCaLA8QR%2FQ474C474&o=5&pid=21.1&h=157&w=300&c=4&rs=1" alt="" /></div>}
                    {activeTab === 3 && <div><img src="https://ts3.cn.mm.bing.net/th?id=ORMS.99582bda27d5a57a536e1f0723741b56&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0" alt="" /></div>}
                    {activeTab === 4 && <div><img src="https://ts3.cn.mm.bing.net/th?id=ORMS.cd1d112fcefb05107ac23c17187ddb92&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0" alt="" /></div>}
                    {activeTab === 5 && <div><img src="https://ts3.cn.mm.bing.net/th?id=ORMS.8b6347148824ea9524776cbbc5e686d0&pid=Wdp&w=612&h=304&qlt=90&c=1&rs=1&dpr=1.5&p=0" alt="" /></div>}
                    {activeTab === 6 && <div><img src="https://ts3.cn.mm.bing.net/th?id=ORMS.1e15374449ec0ec7f08570f8396f869e&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1.5&p=0" alt="" /></div>}
                    {activeTab === 7 && <div><img src="https://ts3.cn.mm.bing.net/th?id=ORMS.23b6320aefe70cc505ddf4ed64df3270&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1.5&p=0" alt="" /></div>}
                </div>
            </div>
            <div className="main">
                <div>
                    <button className='geng'>更多素材</button>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
                <div>
                    <Fuyong></Fuyong>
                </div>
            </div>
        </div>
    );
}

export default Index